<!--  -->
<template>
  <div>
    <div class="tit">
            <span>登录</span>


          </div>
          <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
          
            <el-form-item label="" prop="username">
              <el-input v-model="ruleForm.username">
                <template #prefix>
                  <span class="icon iconfont icon-yonghuming"></span>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="" prop="pwd">
              <el-input type="password" v-model="ruleForm.pwd" show-password>
                <template #prefix>
                  <span class="icon iconfont icon-password"></span>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="" prop="verifyCode">
              <el-input style="width: 100px;" v-model="ruleForm.verifyCode">
                <template #prefix>
                  <span class="icon iconfont icon-password"></span>
                </template>
              </el-input>

              <img @click="getCaptchaData" :src="imageCode" alt="">

            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                登录
              </el-button>

            </el-form-item>
          </el-form>

  </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import { getCaptcha } from '../../apis/auth/auth';
import { Auth, Captcha } from '../../apis/auth/type';
import { FormInstance, FormRules } from 'element-plus';
import { Calendar, Search } from '@element-plus/icons-vue'
import { useAuthStore } from '../../store/authStore';

import { useRouter } from 'vue-router';

const router = useRouter();

const authStore = useAuthStore();
//vue定义响应式数据 ref  reactive

const ruleFormRef = ref();

const ruleForm = reactive<Auth>({
  username: '',
  pwd: '',
  verifyCode: "",
  verifyCodeId: ""
})
const rules = reactive<FormRules<Auth>>({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' }

  ],
  pwd: [
    { required: true, message: '请输入密码', trigger: 'blur' }

  ],
  verifyCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' }

  ],
})

const imageCode = ref("");

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log('submit!')

      //深拷贝

      // let data=JSON.parse(JSON.stringify(ruleForm));
   
      const res = await authStore.login({ ...ruleForm });
     // const res = await authStore.login({ ...ruleForm });
       res && router.push("/index");

    } else {
      console.log('error submit!', fields)
    }
  })
}
//promise解决 回调地狱问题    async 把异步变成同步 解决链式问题
const getCaptchaData = async () => {
  const res = await getCaptcha();
  imageCode.value = res.data.imageCode;
  ruleForm.verifyCodeId = res.data.id;
}

getCaptchaData();

</script>
<style scoped lang="less">
   .login-form {
        flex: 1;
        height: 100%;
        background: #fff;
        padding: 30px 30px;
        position: relative;
        .tit{
          font-size: 20px;
          display: flex;
          justify-content: center;
          margin: 10px auto;
        }
        .checkimg{
          position: absolute;
          right: 10px;
          top: 10px;
          width: 50px;
          height: 50px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .el-input {
          height: 50px;
        }
        .el-button{
          width: 100%;
          height: 50px;
        }
      }

</style>